<template>
  <div
    v-if="showHeader"
    :class="{ fixedTop: fixedTop }"
    ref="headerTop"
    class="needChangeBgOp"
  >
    <mu-appbar
      :style="headerStyle"
      :title="title"
      :color="color"
      :textColor="textColor"
      :pageIndex="pageIndex"
      class="needChangeBgOp needChangeColor"
    >
      <mu-button icon slot="left" v-if="isBack" @click="goBack()">
        <mu-icon value="chevron_left" class="main-font" size="36"></mu-icon>
      </mu-button>
      <div class="pro-top">
        <!-- 用户 -->
        <div class="pro-top-name">
          <slot name="myUser">
            <span>用户：{{ myUser || "未登录" }}</span>
          </slot>
        </div>
        <!-- 标题 -->
        <div class="top-title">
          <slot name="title"></slot>
        </div>
        <!-- 时间 -->
        <div class="top-time">
          <!-- <slot name="time">{{ timeBox }}</slot> -->
        </div>
        <!-- 其他 -->
        <div class="top-other">
          <slot name="other">
            <img
              style="
                width: 28px !important;
                height: 28px !important;
                margin-bottom: -3%;
              "
              :title="netWorkStateTitle"
              :src="netWorkStateIcon_OK"
            />

            <!-- <img style="
                width: 28px !important;
                height: 28px !important;
                margin-left: 10px;
                margin-bottom: -3%;
              " :title="fullScreenTitle" :src="fullScreenIcon" @click="fullExitScreen" /> -->
          </slot>
        </div>
      </div>
    </mu-appbar>
  </div>
</template>

<script>
import storage from "../utils/storage.js";
import http from "../utils/http.js";
import Toast from "muse-ui-toast";
const ToastOption = {
  //position: 'bottom', // 弹出的位置 top / top-start / top-end / bottom / bottom-start / bottom-end
  time: 5000, // 显示的时长
  //closeIcon: 'close', // 关闭的图标
  //close: true, // 是否显示关闭按钮
  //successIcon: 'check_circle', // 成功信息图标
  //infoIcon: 'info', // 信息信息图标
  //warningIcon: 'priority_high', // 提醒信息图标
  //errorIcon: 'warning' // 错误信息图标
};
Toast.config(ToastOption);
export default {
  name: "SafeHeader",
  filters: {
    //定义过滤器
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 4) + "..." + value.slice(6, 10);
      }
      return value;
    },
  },
  props: {
    title: {
      type: String,
      default: () => {
        return "标题";
      },
    },
    pageIndex: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    color: {
      // color和textColor 的设置，参照 https://muse-ui.org/#/zh-CN/color
      type: String,
      default: () => {
        return "";
      },
    },
    textColor: {
      type: String,
      default: () => {
        return "";
      },
    },
    fixedTop: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    isBack: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    showTheme: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    showThemeNew: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    themeIndex: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    backIconColor: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  data: () => {
    return {
      themeIcon: require("../assets/img/theme.png"),
      paddingTop: 0,
      //-------主页面数据--------
      myUser: "", //标题头用户信息
      workClassArr: [], //班次数组
      workCenterArr: [],
      workCellArr: [],
      workClass: { workClassId: "", workClassCode: "" }, //班次
      workCenter: { workCenterId: "", workCenterCode: "" }, //工作中心
      workCell: { workCellId: "", workCellCode: "" }, //绑定的工位ID/CODE
      timeBox: "0000-00-00",
      netWorkStateTitle: "网络通畅",
      netWorkStateIcon_OK: require("../assets/img/netWork-OK.png"),
      fullScreenTitle: "全屏",
      fullScreenIcon: require("../assets/img/fullsCcreen3.png"),
      showHeader: true, //是否展示标题栏
      bg0: require("../assets/img/bg0.png"),
      bg1: require("../assets/img/bg1.png"),
      bg2: require("../assets/img/bg2.png"),
      bg3: require("../assets/img/bg3.png"),
    };
  },
  computed: {
    headerStyle() {
      return {
        paddingTop: this.paddingTop + "px",
        height: this.paddingTop + 30 + "px",
      };
    },
  },
  methods: {
    goBack() {
      //页码pageIndex>0 表示当前所在页为子组件页 点击 < 返回按钮触发的方法
      if (this.pageIndex && parseInt(this.pageIndex) > 0) {
        let item = {};
        item.type = 1; //跳转到第一页
        this.$emit("clickEvent", item, "");
      } else {
        window.api.closeWin();
      }
    },
    // 发送请求:获取工作中心
    getWorkCenter() {
      // 请求参数:获取工位
      let form = new FormData();
      form.append("workCellId", this.workCell.workCellId);
      form.append("workCellCode", this.workCell.workCellCode);

      http
        .post({
          url: "productPadCommController!getWorkCenter.m",
          data: form,
        })
        .then((res) => {
          if (res.status == 200 && res.data.erroCode == 0) {
            if (res.data.data) {
              let resData = JSON.parse(res.data.data);
              this.workCenterArr = resData;
              this.workCenter.workCenterId = resData[0].id;
              this.workCenter.workCenterCode = resData[0].code;
              localStorage.setItem("workCenterId", resData[0].id);
            }
          } else {
            Toast.error({
              message: res.data.msg,
              close: false,
              position: "bottom",
            });
          }
        });
    },
    //发送请求:获取班次
    getClasses() {
      http
        .post({ url: "productPadCommController!getUdiClasses.m" })
        .then((res) => {
          if (res.status == 200 && res.data.erroCode == 0) {
            if (res.data.data) {
              let resData = JSON.parse(res.data.data);
              this.workClassArr = resData;
              this.workClass.workClassId = resData[0].id;
              this.workClass.workClassCode = resData[0].name;
            }
          } else {
            Toast.error({
              message: res.data.msg,
              close: false,
              position: "bottom",
            });
          }
        });
    },
    // 发送请求:获取登录用户
    getCUser() {
      // 请求参数:获取登录人
      let form = new FormData();
      let user = storage.getObject("user");
      form.append("un", user.username); //登录人员

      http
        .post({
          url: "productPadCommController!getCUser.m",
          data: form,
        })
        .then((res) => {
          if (res.status == 200 && res.data.erroCode == 0) {
            let resData = JSON.parse(res.data.data);
            // console.log("登录用户 ===="+resData.user);
            this.myUser = resData.user;
            storage.setObject("loginName", resData.name);
          } else {
            Toast.error({
              message: res.data.msg,
              close: false,
              position: "bottom",
            });
          }
        });
    },
    //获取时间
    formatDate() {
      let date = new Date();
      //let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hours = date.getHours();
      let mins = date.getMinutes();
      let sec = date.getSeconds();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      if (hours < 10) hours = "0" + hours;
      if (mins < 10) mins = "0" + mins;
      if (sec < 10) sec = "0" + sec;
      return (this.timeBox =
        // year +
        // "-" +
        // month +
        // "-" +
        // day +
        // " " +
        hours + ":" + mins + ":" + sec);
    },
    currentTime() {
      setInterval(this.formatDate, 1000);
    },
    //获取登录人员和绑定工位
    initCellAndPerson() {
      let form = new FormData();

      let workCellInfo = storage.getObject("workCells") || [];
      workCellInfo = workCellInfo[0] || {};
      form.append("workCellId", workCellInfo.id || ""); //绑定的工位
      form.append("workCellCode", workCellInfo.code || ""); //绑定的工位

      this.workCell.workCellId = workCellInfo.id || "";
      let value = workCellInfo.code;
      if (value && value.length > 12) {
        this.workCell.workCellCode = value.slice(0, 11);
      } else {
        this.workCell.workCellCode = workCellInfo.code || "";
      }

      let user = storage.getObject("user");
      form.append("un", user.username); //登录人员
      this.myUser = user.username;
      this.person = user.username;
      return form;
    },
    //发送请求:获取网络状态
    currentNetWork() {
      setInterval(this.getNetWorkState, 10000);
    },
    getNetWorkState() {
      http
        .post({
          url: "productPadCommController!getNetWorkState.m",
          data: new FormData(),
        })
        .then((res) => {
          this.netWorkStateIcon_OK = require("../assets/img/netWork-OK.png");
          this.netWorkStateTitle = "网络通畅";
          console.log(res);
        });
      // .catch(err => {
      //     this.netWorkStateIcon_OK = require("../assets/img/netWork-NO.png");
      //     this.netWorkStateTitle = "网络断开";
      // });
    },
    //全屏切换
    fullExitScreen() {
      let docElm = document.documentElement;
      let explorer = window.navigator.userAgent.toLowerCase();
      if (explorer.indexOf("chrome") > 0) {
        //webkit
        if (
          document.fullscreenElement ||
          document.msFullscreenElement ||
          document.mozFullScreenElement ||
          document.webkitFullscreenElement
        ) {
          //退出全屏
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          }
        } else {
          //全屏
          //W3C
          if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
          } else if (docElm.mozRequestFullScreen) {
            //FireFox浏览器
            docElm.mozRequestFullScreen();
          } else if (docElm.webkitRequestFullScreen) {
            //Chrome等浏览器
            docElm.webkitRequestFullScreen();
          }
        }
      } else {
        //fireFox浏览器
        if (
          document.fullscreenElement ||
          document.msFullscreenElement ||
          document.mozFullScreenElement ||
          document.webkitFullscreenElement
        ) {
          //退出全屏
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          }
        } else {
          //全屏
          //W3C
          if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
          } else if (docElm.mozRequestFullScreen) {
            //FireFox浏览器
            docElm.mozRequestFullScreen();
          } else if (docElm.webkitRequestFullScreen) {
            //Chrome等浏览器
            docElm.webkitRequestFullScreen();
          }
        }
      }
    },
    checkIsFull() {
      //是否全屏
      let isFull =
        document.fullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.fullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement;
      //to fix : false || undefined == undefined
      if (isFull === undefined) isFull = false;
      return isFull;
    },
    changeBgImage() {
      //主题变更
      this.$root.api.changeBgImage();
    },
    changeBgImageNew(num) {
      //主题变更
      this.$root.api.changeBgImageNew(num);
    },
  },
  created() {
    let self = this;
    window.onresize = function () {
      if (self.checkIsFull()) {
        //全屏
        self.fullScreenIcon = require("../assets/img/exitCcreen3.png");
        self.fullScreenTitle = "退出全屏";
        // self.showHeader = false;
        // self.$refs.headerTop.nextSibling.style.paddingTop = 0 + "px";
      } else {
        //取消全屏
        //要执行的动作
        self.fullScreenIcon = require("../assets/img/fullsCcreen3.png");
        self.fullScreenTitle = "全屏";
        // self.showHeader = true;
        // setTimeout(() => { //延迟执行
        //   self.$refs.headerTop.nextSibling.style.paddingTop = (self.fixedTop ? self.paddingTop + self.$refs.headerTop.offsetHeight : 0) + "px";
        // }, 0);
      }
    };
  },
  mounted: function () {
    this.paddingTop = window.api ? window.api.safeArea.top : 0;
    this.$refs.headerTop.nextSibling.style.paddingTop =
      (this.fixedTop
        ? this.paddingTop + this.$refs.headerTop.offsetHeight
        : 0) + "px";
    //获取登录人员和绑定工位
    this.initCellAndPerson();
    //时间定时器
    this.currentTime();
    //获取产线下拉框
    this.getWorkCenter();
    //获取班次下拉框
    // this.getClasses();
    //获取当前登陆人信息
    this.getCUser();
    //获取网络状态
    this.currentNetWork();
    //默认主题背景
    if (this.themeIndex && this.themeIndex > 0) {
      this.changeBgImageNew(this.themeIndex);
    }
  },
};
</script>

<style scoped lang="scss">
::v-deep .mu-appbar-title {
  font-size: 14px;
  margin-left: -20px;
  padding: unset;
}
.mu-appbar {
  width: 100%;
}
.fixedTop {
  position: fixed;
  width: 100%;
  background: #fff;
  z-index: 100;
}
.fixedTop + * {
  padding-top: 80px;
}
.mu-appbar-title {
  text-align: center;
  margin-right: 2rem;
}
//插槽DIV布局 行内块显示
.pro-top div {
  display: inline-block;
  height: 100%;
}

//顶部样式
.pro-top {
  position: relative;
  width: 100%;
  height: 10%;
  min-height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 14px;
  //返回按钮
  .pro-top-back {
    position: absolute;
    width: 5%;
    left: 0%;
  }
  //登录用户编码
  .pro-top-name {
    position: absolute;
    top: 0;
    left: 1%;
    font-size: 14px;
    text-align: left;
  }
  //登录班次|产线|工位
  .pro-top-workInfo {
    position: absolute;
    width: 40%;
    top: 0;
    left: 17%;
    font-size: 14px;
    .top-divide {
      width: 30%;
      height: 100%;
      margin-left: 3%;
    }
  }
  //标题头
  .top-title {
    position: absolute;
    width: 20%;
    height: 100%;
    left: 35%;
    font-size: 14px;
    font-weight: 400;
  }
  //时间
  .top-time {
    position: absolute;
    height: 100%;
    right: 5%;
    font-size: 14px;
    font-weight: 400;
  }
  .top-other {
    position: absolute;
    right: 5%;
    height: 100%;
    font-size: 14px;
  }
}
</style>

